<template>
	<view>
		<view class="swiperPanel" ref="swiperPanel" @touchstart="startMove" @touchend="endMove">
			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index" @click="handleClick(item)" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<!-- <view class="children border_r8" :style="{backgroundImage:`url(${item.url})`}"> -->
				<view class="children border_r8 bg_g">
					<!-- <image class="pic" :src="item.url"></image> -->
					<!--  #ifdef  MP-WEIXIN -->
					<slot name="slot{{index}}" />
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<slot v-bind="item" />
					<!--  #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * fr-card-swiper 卡片式层叠轮播图
	 * @description 仿小米有品卡片式层叠轮播图
	 * 
	 * @property {Array} swiperList 轮播图图片数据源 {url: '图片链接'}
	 * @property {Number} interval 轮播图自动切换时间间隔, 默认3000
	 * @property {Boolean} autoplay 轮播图是否自动播放
	 * @event {Function} handleClick 点击轮播图触发事件
	 */
	let timer;
	export default {
		name: "fr-card-swiper",
		props: {
			swiperList: {
				type: Array,
				default: []
			},
			interval: {
				type: Number,
				default: 3000
			},
			autoplay: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: [],
			};
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
			if(this.autoplay) {
				timer = setInterval(()=>{
					this.rightSlider();
				},this.interval)
			}
		},
		methods: {
			rightSlider(){
				var newList = JSON.parse(JSON.stringify(this.itemStyle));
				var last = [newList.pop()]
				newList = last.concat(newList)
				this.itemStyle = newList;
			},
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
						zIndex: 999 - right,
						opacity: 0.5 / right
					}
				} else {
					return {
						transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
						zIndex: 999 - e,
						opacity: 0.5 / e
					}
				}
			},
			startMove(e) {
				clearInterval(timer);
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				let endx = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				let endy = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
				if(Math.abs(this.slideNote.x - endx) < 10) {
					// 手指滑动距离少于10像素, 不执行滑动
					return
				}
				if(this.autoplay) {
					timer = setInterval(()=>{
						this.rightSlider();
					},this.interval)
				}
				var newList = JSON.parse(JSON.stringify(this.itemStyle));
				if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
					// 向左滑动
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					// 向右滑动
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList
			},
			handleClick(data) {
				this.$emit('handleClick', data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiperPanel {
		margin: 20rpx 0;
		height: 456rpx;
		// width: 686rpx;
		width: 100%;
		overflow: hidden;
		position: relative;
		margin-left: 28rpx;
		// box-sizing: border-box;

		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			transition: all .5s;

			.children {
				height: 100%;
				width: 648rpx;
				margin: 2rpx 160rpx 2rpx 0;
				position: relative;
				background-size: 100% 100%;
				.right{
					position: absolute;
					right:0;
					top:0;
					width:50%;
					height:100%;
					background:#C29462;
					color:#fff;
					font-size:32rpx;
					padding:10rpx;
					box-sizing: border-box;
					border-radius: 0 10rpx 10rpx 0;
				}

				.pic {
					height: 100%;
					width: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>